<html>
  <head>
    <style>
    .image-loader {
      width: 80px;
      height: 80px;
      position: relative;
      margin: auto;
      margin-top: 60px;
      margin-bottom: 70px;
    }

    .image-loader .dot {
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      height: 80px;

      animation: 1.7s dotrotate cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
    }

    .image-loader .dot:nth-child(1) {
      animation-delay: 0.2s;
    }

    .image-loader .dot:nth-child(2) {
      animation-delay: 0.35s;
    }

    .image-loader .dot:nth-child(3) {
      animation-delay: 0.45s;
    }

    .image-loader .dot:nth-child(4) {
      animation-delay: 0.55s;
    }

    .image-loader .dot:after, .image-loader .dot .first {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      background: #02aff1;
      border-radius: 50%;
      left: 50%;
      margin-left: -4px;
    }

    .image-loader .dot .first {
      background: #02aff1;
      margin-top: -4px;
      animation: 1.7s dotscale cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
      animation-delay: 0.2s;
    }

    @keyframes dotrotate { 
      from { transform: rotate(0deg); } 
      to { transform: rotate(360deg); }
    }

    @keyframes dotscale { 
      0%, 10% { width: 16px; height: 16px; margin-left: -8px;  margin-top: -4px; } 
      50% { width: 8px; height: 8px; margin-left: -4px; margin-top: 0; }
      90%, 100% { width: 16px; height: 16px;  margin-left: -8px;  margin-top: -4px; }
    }
    </style>
  </head>
  <body>
    <div class="image-loader">
      <div class="dot">
        <div class="first"></div>
      </div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </body>
</html>



